﻿<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>iNEWU 爱牛油 - 在线观看免费正版高清亚洲电视剧、电影、综艺、动漫 - 独家韩剧、陆剧、泰剧 </title>
        <link href="favicon.ico" rel="shortcut icon">
	    <script src="js/common/axios.min.js"></script>
        <script src="js/common/vue.js"></script>
        <script src="js/common/template.js"></script>
        <script src="js/common/vue-resource.js"></script>
        <script src="js/common/httpVueLoader.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/actor.css">
        <script src="https://cdn.tailwindcss.com"></script>
        <style type="text/css">
            [v-cloak]{
              display: none;
            }
        </style>
    </head>
    <body>
        <div id="contn">
            <v-header></v-header>
            <v-main @call-share="share"></v-main>
            <v-footer></v-footer>
            <v-notice ref="noticeRef"></v-notice>
            <v-side></v-side>
            <v-share ref="shareRef" @call-add-notice="addNotice"></v-share>
        </div>
        <template id="vMain">
            <main v-cloak>
                <div class="info fluid">
                    <div class="flex">
                        <div class="flex flex-align-items flex-justify-content share" @click="share">
                            <img src="img/common/share.png"><p>分享</p>
                        </div>
                        <div class="avatar mid r50">
                            <img :src="info.avatar" class="fc">
                        </div>
                        <div class="txt">
                            <p class="name">{{info.name}}</p>
                            <div class="flex names">
                                <p>{{info.letter}}</p>
                                <p v-if="info.nickName">别名：{{info.nickName}}</p>
                            </div>
                            <div class="dtl flex flex-wrap">
                                <template v-if="!introduceSeeAll">
                                    <p>{{info.gender?'男':'女'}}</p>
                                    <p>{{info.position}}</p>
                                    <p>{{info.age}}</p>
                                    <p>{{info.birth}}</p>
                                    <p>{{info.xz}}</p>
                                    <p>{{info.from}}</p>
                                </template>
                                <template v-else>
                                    <div class="fg flex">
                                        <p class="lbl">性别</p>
                                        <p>{{info.gender?'男':'女'}}</p>
                                    </div>
                                    <div class="fg flex">
                                        <p class="lbl">职业</p>
                                        <p>{{info.position}}</p>
                                    </div>
                                    <div class="fg flex">
                                        <p class="lbl">年龄</p>
                                        <p>{{info.age}}</p>
                                    </div>
                                    <div class="fg flex">
                                        <p class="lbl">生日</p>
                                        <p>{{info.birth}}</p>
                                    </div>
                                    <div class="fg flex">
                                        <p class="lbl">星座</p>
                                        <p>{{info.xz}}</p>
                                    </div>
                                    <div class="fg flex">
                                        <p class="lbl">国籍</p>
                                        <p>{{info.from}}</p>
                                    </div>
                                </template>
                            </div>
                            <div class="des l2" :class="{all:introduceSeeAll}">{{info.introduce}}
                                <div class="flip flex" @click="hdlSee">
                                    <div class="flex cursor">
                                        <p class="shadow"></p>
                                        <div class="t flex flex-align-items">
                                            {{introduceSeeAll?'收合':'显示更多'}}
                                            <div class="dc">
                                                <img src="img/common/arw5.png">
                                                <img src="img/common/arw4.png">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template v-for="(item,i) in actor">
                    <div class="media" :class="'media' + i">
                        <div class="fluid">
                            <p class="ttl">{{item.ttl}}</p>
                            <div class="cate flex" v-if="i == 0">
                                <p v-for="(item,i) in proCate" :class="{active:i == proInd}"
                                @click="preparePro(i)">
                                    {{item.name}}({{item.num}})
                                </p>
                            </div>
                            <div class="list-contain">
                                <div class="list-box">
                                    <div class="history flex" v-if="i == 0">
                                        <div class="hItm" v-for="hItm in years">
                                            <p v-if="hItm">{{hItm}}</p>
                                        </div>
                                    </div>
                                    <div class="list flex">
                                        <template v-for="(sItm,s) in item.list">
                                            <div v-if="i == 2" class="item cursor">
                                                <a href="actor.html" class="avatar flex">
                                                    <div class="mid r50">
                                                        <img :src="sItm.avatar" class="fc">
                                                    </div>
                                                    <div class="txt flex flex-col flex-between">
                                                        <p class="name">{{sItm.name}}</p>
                                                        <div class="pos flex flex-align-items flex-between">
                                                            <div class="flex">
                                                                <p class="t" v-for="tItm in sItm.types">{{tItm}}</p>
                                                            </div>
                                                            <div class="more flex flex-align-items">
                                                                更多
                                                                <p class="dc">
                                                                    <img src="img/common/arw2.png">
                                                                    <img src="img/common/arw2-1.png">
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                                <div class="work flex">
                                                    <div class="sItm" v-for="wItm in sItm.work" 
                                                    @mouseenter="hover(wItm,$event)"
                                                    @mouseleave="leave(wItm,$event)">
                                                        <div class="mid cover">
                                                            <img :src="wItm.cover" class="fc">
                                                            <div class="series">
                                                                <!-- <p class="t">38集全</p> -->
                                                            </div>
                                                            <!-- 
                                                            <div class="right-top">TOP<span>10</span></div>
                                                            <div class="play mid r50 btn hvc play-btn">
                                                                <img src="img/common/triangle.png" class="hvc">
                                                            </div>
                                                            <div class="collect mid r50 btn pop-parent">
                                                                <img src="img/common/collect.png" class="hvc">
                                                                <div class="pop">
                                                                    <p>加入收藏</p>
                                                                </div>
                                                            </div> -->
                                                            
                                                        </div>
                                                        <div class="txt">
                                                            <p class="name l2">{{wItm.name}}</p>
                                                        </div>          
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="info.html" class="item cursor" 
                                            @mouseenter="hover(sItm,$event,i)"
                                            @mouseleave="leave(sItm,$event,i)" v-else>
                                                <template v-if="item.type == 'star'">
                                                    <div class="mid avatar r50">
                                                        <img :src="sItm.url" class="fc">
                                                    </div>
                                                    <p class="l1 name">{{sItm.name}}</p>
                                                </template>
                                                <template v-else>
                                                    <div class="mid cover">
                                                        <img :src="sItm.cover" class="fc">
                                                        <div class="series">
                                                            <!-- <p class="t">38集全</p> -->
                                                        </div>
                                                        <!-- <div class="right-top">TOP<span>10</span></div> -->
                                                    </div>
                                                    <div class="txt">
                                                        <p class="name l2">{{sItm.name}}</p>
                                                    </div>
                                                </template>
                                                
                                            </a>
                                        </template>
                                    </div>
                                </div>
                                <div class="next cursor flip-btn vc" 
                                v-if="item.list.length > item.row && item.currPage != item.pages"
                                @click="flip('next',i)">
                                    <img src="img/common/arw2.png">
                                </div>
                                <div class="prev cursor flip-btn vc" 
                                v-if="item.currPage > 1"
                                @click="flip('prev',i)">
                                    <img src="img/common/arw2.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </main>
        </template>
        
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/dataUrl.js"></script>
        <script>
            Vue.use(httpVueLoader);
            var contn = new Vue({
                el:'#contn',
                data:{
                   
                },
                methods:{
                    share(obj){
                        this.$refs.shareRef.hdlShow('img/index/a2.jpg');
                    },
                    addNotice(msg,type){
                        console.log(msg,type);
                        this.$refs.noticeRef.add({
                            msg:msg,
                            type:type,
                            time:new Date().getTime()
                        });
                    },
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    'v-header': 'url:./js/common/v-header.vue',
                    'v-footer': 'url:./js/common/v-footer.vue',
                    'v-notice': 'url:./js/common/v-notice.vue',
                    'v-side': 'url:./js/common/v-side.vue',
                    'v-share': 'url:./js/common/v-share.vue',
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                
                                info:{
                                    name:'李沁',
                                    avatar:'img/index/a2.jpg',
                                    letter:'Li Qin',
                                    nickName:'沁沁',
                                    gender:0,
                                    position:'演员',
                                    age:35,
                                    birth:'1990-09-27',
                                    xz:'天平座',
                                    from:'中国大陆',
                                    introduce:'李沁，1990年9月27日出生于江苏省苏州市昆山市，毕业于上海戏剧学院，中国内地影视女演员。 2008年，主演的古装剧《红楼梦》播出。 2012年，凭借电视剧《建党伟业》中杨开慧一角，提名第31届大众电影百花奖最佳新人奖。2013年至2017年，主演的电视剧《守望的天空》《千金归来》《楚乔传》等陆续播出。2018年，凭借年代剧《白鹿原》提名第24届上海电视节白玉兰奖最佳女配角奖。 2020年，凭借电视剧《庆余年》中林婉儿一角，提名第29届华鼎奖中国古装题材电视剧最佳女演员；同年7月，主演的古装言情剧 《锦绣南歌》播出；12月，主演的喜剧电影《温暖的抱抱》上映。 2023年3月20日，领衔主演的电视剧《人生之路》在央视一套、爱奇艺播出，饰演刘巧珍；6月1日，主演的电视剧《梦中的那片海》播出；12月5日，获得2023微博视界大会微光荣耀年度实力演员奖。 2024年5月16日，主演的电视剧《庆余年第二季》播出；10月9日，领衔主演的古装武侠剧《七夜雪》在爱奇艺独播，饰演薛紫夜。2025年6月30日，领衔主演的都市情感悬疑剧《亲爱的你》播出，饰演石典典；10月2日，主演的电视剧《一笑随歌》在爱奇艺播出，饰演付一笑。'
                                },
                                proCate:[],
                                proInd:0,
                                years:[],
                                production:[
                                    {name:'七夜雪',cover:'img/index/2.jpg',type:'电视剧',publishTime:'2024-01-01'},
                                    {name:'亲爱的你',cover:'img/index/1.jpg',type:'电视剧',publishTime:'2025-01-01'},
                                    {name:'机智的恋爱',cover:'img/index/6.jpg',type:'综艺',publishTime:'2021-01-01'},
                                    {name:'人生之路',cover:'img/index/4.jpg',type:'电视剧',publishTime:'2023-01-01'},
                                    {name:'2021央视春晚',cover:'img/index/cctv1.jpg',type:'综艺',publishTime:'2021-01-01'},
                                    {name:'追风者',cover:'img/index/3.jpg',type:'电视剧',publishTime:'2024-01-01'},
                                    {name:'一笑随歌',cover:'img/index/cover.png',type:'电视剧',publishTime:'2025-01-01'},
                                    {name:'请君',cover:'img/index/5.jpg',type:'电视剧',publishTime:'2022-01-01'},
                                    {name:'2020央视春晚',cover:'img/index/cctv2.jpg',type:'综艺',publishTime:'2020-01-01'},
                                    {name:'爱上特种兵',cover:'img/index/7.jpg',type:'电视剧',publishTime:'2021-01-01'},
                                ],
                                actor:[
                                    {
                                        row:8,
                                        rowAry:[8,6,4,3],
                                        ttl:'演艺经历',
                                        list:[],
                                        
                                    },
                                    {
                                        row:6,
                                        rowAry:[6,4,3,2],
                                        ttl:'精彩看点',
                                        list:[
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                            {name:'那英看上一幅画，李沁毫不犹豫买下，温婉的外表下是知恩图报的心',cover:'img/index/clip.jpg'},
                                        ]
                                    },
                                    {
                                        row:4,
                                        rowAry:[4,3,2,1],
                                        ttl:'相关人物',
                                        list:[
                                            {
                                                name:'李沁',
                                                avatar:'img/index/a1.jpg',
                                                types:['演员','导演'],
                                                work:[
                                                    {name:'一笑隋哥',cover:'img/index/1.jpg'},
                                                    {name:'七雪',cover:'img/index/2.jpg'},
                                                ]
                                            },
                                            {
                                                name:'陈哲远',
                                                avatar:'img/index/a2.jpg',
                                                types:['演员'],
                                                work:[
                                                    {name:'一笑隋哥',cover:'img/index/1.jpg'},
                                                    {name:'七雪',cover:'img/index/2.jpg'},
                                                ]
                                            },
                                            {
                                                name:'李沁',
                                                avatar:'img/index/a1.jpg',
                                                types:['演员','导演'],
                                                work:[
                                                    {name:'一笑隋哥',cover:'img/index/1.jpg'},
                                                    {name:'七雪',cover:'img/index/2.jpg'},
                                                ]
                                            },
                                            {
                                                name:'陈哲远',
                                                avatar:'img/index/a2.jpg',
                                                types:['演员'],
                                                work:[
                                                    {name:'一笑隋哥',cover:'img/index/1.jpg'},
                                                    {name:'七雪',cover:'img/index/2.jpg'},
                                                ]
                                            },
                                            {
                                                name:'李沁',
                                                avatar:'img/index/a1.jpg',
                                                types:['演员','导演'],
                                                work:[
                                                    {name:'一笑隋哥',cover:'img/index/1.jpg'},
                                                    {name:'七雪',cover:'img/index/2.jpg'},
                                                ]
                                            },
                                            {
                                                name:'陈哲远',
                                                avatar:'img/index/a2.jpg',
                                                types:['演员'],
                                                work:[
                                                    {name:'一笑隋哥',cover:'img/index/1.jpg'},
                                                    {name:'七雪',cover:'img/index/2.jpg'},
                                                ]
                                            },
                                        ]
                                    },
                                    
                                ],
                                dly:null,
                                introduceSeeAll:false,
                                sizeRange:[1680,1024,768,0],
                            }
                        },
                        methods:{
                            collect(ind){
                                this.$refs.noticeRef.add({
                                    msg:'收藏成功',
                                    type:'success',
                                    time:new Date().getTime()
                                });
                            },
                            
                            hdlSee(){
                                this.introduceSeeAll = !this.introduceSeeAll;
                            },
                            leave(row,e,type){
                                if(type == 'star') return false;
                                clearTimeout(this.dly);
                                this.dly = null;
                            },
                            hover(row,e,ind){
                                if(row.work || window.innerWidth < 768) return false;
                                $('.media-info').remove(); 
                                clearTimeout(this.dly);
                                this.dly = null;
                                let pos = e.target.getBoundingClientRect();
                                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                                // this.$refs.mediaInfoRef;
                                let width = e.target.offsetWidth * 1.349;
                                let widthOffset = e.target.offsetWidth * 0.349 / 2;
                                
                                let html = `<div class="mid cover">
                                    <img src="${row.cover}" class="fc">
                                    <p class="fill"></p>
                                    <div class="play-collect flex">
                                        <a href="play.html" target="_blank" class="btn mid r50 play-btn">
                                            <img src="img/common/triangle.png" class="hvc">
                                        </a>
                                        <div class="btn mid r50 collect pop-parent expandHover">
                                            <img src="img/common/collect.png" class="hvc">
                                            <div class="pop">
                                                <p>加入收藏</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="txt">
                                    <!-- <p class="name l1">${row.name}</p> -->
                                    <div class="num flex flex-align-items">
                                        <div class="score flex flex-align-items">
                                            <img src="img/common/score.png"><p>9.8</p>
                                        </div>
                                        <i></i>
                                        <p class="age">13+</p>
                                        <i></i>
                                        <p class="year">2023</p>
                                    </div>
                                    <div class="tags flex flex-wrap">
                                        <p>中国大陆</p>
                                        <p>战争</p>
                                        <p>古装</p>
                                    </div>
                                    <div class="des">
                                        <p class="l1">《与晋长安》改编自九鹭非香(《苍兰诀》)
                                            的同名小说，是由邓科(《折腰》)导演，宋
                                            轶(《颜心记》、《伪装者》、《庆余年》)、丞
                                            磊(《大梦归离》、《云之羽》)、毕雯珺(《爱
                                            你》、《九霄寒夜暖》)、史策(《狗剩快跑》潸</p>
                                    </div>
                                    <div class="more flex flex-align-items">
                                        <p>更多信息</p>
                                        <img src="img/common/arw1.png">
                                    </div>
                                </div>`;
                                // let elA = $("<a></a>").html(html);
                                // elA.attr('href','info.html');
                                let elA = $("<div></div>").html(html);
                                elA.addClass('media-info');
                                elA.css('width',`${width}px`);
                                elA.css('top',`${scrollTop + pos.top - 20}px`);
                                elA.css('left',`${pos.left - widthOffset}px`);
                                elA.on('mouseleave', function() {
                                    console.log('del;');
                                    $('.media-info').remove(); 
                                })
                                this.dly = setTimeout(()=>{
                                    $("main").append(elA);
                                },100);
                            },
                            writingWeb(){
                                var This = this;
                            },
                            share(){
                                this.$emit('call-share');
                            },
                            handleResize() {
                                let ary = newObj(this.actor);
                                let This = this;
                                ary.forEach(item => {
                                    
                                    for(var r = 0;r < This.sizeRange.length;r++){
                                        if(window.innerWidth >= This.sizeRange[r]){
                                            item.row = item.rowAry[r];
                                            if(item.type == 'star'){
                                                item.gap = item.gapAry[r];
                                            }else{
                                                item.gap = 16;
                                            }  
                                            if(window.innerWidth < 768){
                                                item.gap = 8;
                                            }
                                            break;
                                        }
                                    } 
                                    
                                    
                                    
                                });
                                this.actor = ary;
                                this.init();
                                $(`main .media .list-box`).removeClass('active');
                                $(`main .media .list`).css('transform','');
                                $(`main .media .history`).css('transform','');
                                
                                console.log('当前窗口宽度:', window.innerWidth)
                            },
                            init(){
                                let ary = newObj(this.actor);
                                let This = this;
                                ary.forEach(item => {
                                    item.currPage = 1;
                                    item.pages = Math.ceil(item.list.length / item.row);
                                    item.intPage = item.list.length % item.row || true;
                                });
                                console.log(ary);
                                this.actor = ary;
                            },
                            flip(type,ind){
                                console.log($(`main .media:eq(${ind})`));
                                let ary = newObj(this.actor);
                                let rowW = $(`main .media:eq(${ind}) .list .item`)[0].offsetWidth + ary[ind].gap;
                                let distance;
                                if(type == 'next'){
                                    $(`main .media:eq(${ind}) .list-box`).addClass('active');
                                    ary[ind].currPage++;
                                }else{
                                    ary[ind].currPage--
                                }
                                if(ary[ind].currPage == ary[ind].pages && ary[ind].intPage !== true){
                                    console.log('最后，非整数页')
                                    distance = rowW * ary[ind].row * (ary[ind].pages - 2) + rowW * ary[ind].intPage;
                                }else{
                                    distance = rowW * ary[ind].row * (ary[ind].currPage - 1);
                                }
                                console.log(rowW,ary[ind],distance);
                                $(`main .media:eq(${ind}) .list`).css('transform',`translateX(-${distance}px)`);
                                if(!ind){
                                    $(`main .media:eq(${ind}) .history`).css('transform',`translateX(-${distance}px)`); 
                                }
                                this.actor = ary;
                            },
                            preparePro(ind){
                                let ary = !ind?(newObj(this.production)):(getMatchedItm(this.production,this.proCate[ind].name,'type'));
                                let newAry = ary.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime));
                                var years = [];
                                newAry.forEach(item=>{
                                    let yy = new Date(item.publishTime).getFullYear();
                                    years.push(years.indexOf(yy) < 0?yy:'');
                                })
                                let actAry = this.actor;
                                actAry[0].list = newAry;
                                this.years = years;
                                this.actor = actAry;
                                this.proInd = ind;
                                console.log(this.years);
                                this.init();
                            }
                        },
                        beforeDestroy() {
                            window.removeEventListener('resize', this.handleResize)
                        },
                        mounted:function(){
                            var This = this;
                            window.addEventListener('resize', this.handleResize)
                            this.writingWeb();
                            this.preparePro(0);
                            this.handleResize();
                            let ary = [];
                            fltrCate(this.production,'type',['全部']).forEach((item,i)=>{
                                if(!i){
                                    ary.push({name:item,num:This.production.length})
                                }else{
                                    ary.push({name:item,num:getMatchedItm(This.production,item,'type').length})
                                }
                            })
                            this.proCate = ary;

                        }
                    },
                },
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/actor.js"></script>
    </body>
</html>